<html>
    
    <head>
      <meta charset="utf-8">
      <title>Canvas tutorial</title>
      <script type="text/javascript">
        function draw() {
          var canvas = document.getElementById("tutorial");
          if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            var dataList = [{
              name: '设定方向',
              value: 10,
            },{
              name: '采取行动',
              value: 3,
            },{
              name: '人际网络',
              value: 9,
            },{
              name: '团队凝聚',
              value: 45,
            },{
              name: '交付成果',
              value: 33,
            },{
              name: '压力承受',
              value: 50,
            },{
              name: '探索可能',
              value: 27,
            },{
              name: '评估方案',
              value: 33,
            }]

            var util = {
              getCoordinate: function (centerX, centerY, radius, degree) { // 根据圆心，半径，弧度，得到坐标
                var x = centerX + Math.cos(degree) * radius
                var y = centerY + Math.sin(degree) * radius
                return {
                  x: Math.floor(x),
                  y: Math.floor(y)
                }
              },
              getDegree: function (degree) { // 根据角度得到弧度
                return Math.PI/180 * degree
              }
            }

            writeBig() // 绿色大圆
            writeSmall() // 白色圆
            writeLine() // 4条分界线
            writeGrrenBall() // 绿色小圆
            writeWhiteWord() // 白色文字

            function writeBig() {
              var radius = 140
              var lineargradient = ctx.createLinearGradient(0,150,150,0); // 渐变
              lineargradient.addColorStop(0,'#4B6981');
              lineargradient.addColorStop(1,'#82A0B9');
              ctx.fillStyle = lineargradient
              ctx.beginPath();
              ctx.arc(150,150,radius,0,Math.PI*2,true)
              ctx.fill()
            }

            function writeSmall () {
              var radius = 100
              ctx.fillStyle = 'white'
              ctx.beginPath();
              ctx.arc(150,150,radius,0,Math.PI*2,true)
              ctx.fill()
            }

            function writeLine () {
              var begin = 0
              for (var i = 0; i < 8; i++) {
                ctx.strokeStyle = '#e1e1e1' 
                ctx.beginPath()
                ctx.moveTo(150, 150)
                ctx.lineTo(util.getCoordinate(150, 150, 140, util.getDegree(begin)).x, util.getCoordinate(150, 150, 140, util.getDegree(begin)).y)
                ctx.stroke()
                begin += 45
              }
            }
            
            function writeGrrenBall () {
              var degree = 22.5
              var radius = 17
              for (var i = 0; i < 8; i++) {
                ctx.beginPath()
                ctx.fillStyle = '#01BDC8'
                var x = util.getCoordinate(150, 150, 72, util.getDegree(degree)).x
                var y = util.getCoordinate(150, 150, 72, util.getDegree(degree)).y
                ctx.arc(x, y, radius, 0, Math.PI*2, true)
                ctx.fill()
                ctx.font = "14px sans-serif";
                ctx.fillStyle = 'white'
                var xDeviation = dataList[i].value < 10 ? 9 : 14 // 一个数字和两个数字偏移不一样
                ctx.fillText(dataList[i].value + '%', x - xDeviation, y + 5)
                degree += 45
              }
            }
    
            function writeWhiteWord () {
              var ratateList = [290, 340, 20, 70, 290, 335, 20, 70]
              var degreeList = [35, 80, 125, 170, 190, 235, 280, 325]
              for (var i = 0; i < 8; i++) {
                var x = util.getCoordinate(150, 150, 120, util.getDegree(degreeList[i])).x
                var y = util.getCoordinate(150, 150, 120, util.getDegree(degreeList[i])).y
                ctx.save();
                ctx.strokeStyle = 'white'
                ctx.font = "14px sans-serif";
                ctx.translate(x, y) // 变换原点
                ctx.rotate(util.getDegree(ratateList[i]))
                ctx.beginPath()
                ctx.fillText(dataList[i].name, 0 - 6, 0 + 6)
                ctx.restore();
              }
            }
          }
        }
      </script>
      <style>
      </style>
    </head>
    
    <body onload="draw();">
      <img src="./images/canvas.png" alt="">
      <canvas id="tutorial" width="300" height="300"></canvas>
    </body>
    
    </html>